<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>

</head>

<body>

    <div id="app">
    </div>

    <!-- 父组件 -->
    <template id="one">
        <!-- 在使用具名插槽时需要将内容编写进入template标签中,使用冒号语法传递插槽名 -->
        <two>
            <template v-slot:a1>
                <p>test1</p>
            </template>
            <!-- #是v-solt: 的缩写,同v-bind一样 -->
            <template #a2>
                <p>test2</p>
            </template>
            <!-- 动态插槽名 -->
            <template #[a3name]>
                <p>test3</p>
            </template>
        </two>
    </template>

    <!-- 子组件 -->
    <template id="two">
        <div>
            <!-- 需要在同一组件内使用多个插槽显示不同内容时需要使用slot的name属性添加具名插槽 -->
            <slot name="a1">我是a1默认</slot>
            <slot name="a2">我是a2默认</slot>
            
            <slot name="a3">我是默认信息</slot>
        </div>
    </template>

</body>
<script>

    /**
     * 具名插槽：子组件可以定义多个插槽，使用name属性来区分。
     * 父组件通过slot="slotName"来指定内容插入到哪个插槽。
     * */
    let config = {
        data(){return{ 'a3name':'a3'}},
        template: '#one',
        components: {
            'two': { template: '#two' }
        }
    }
    Vue.createApp(config).mount('#app');

</script>

</html>